<template>
	<view class="recharge-page">
		<u-navbar :autoBack="true" title="提现" :placeholder="true" bgColor="rgba(255,255,255,0)">
		</u-navbar>
		<view class="content">
			<view class="recharge">
				<view class="recharge-title">
					<view>
						提现金额
					</view>
					<view class="all" @click="amount = info.money">
						全部提现
					</view>
				</view>
				<view class="amount">
					<view class="amount-text">￥</view>
					<u-input placeholder="请输入金额" type="number" border="none" v-model="amount"></u-input>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding-right: 20rpx;">
					<view class="available">
						可提现金额 {{info.money}}
					</view>
					<view class="available" @click="$navTo.togo('/pages/my/wallet/record')">提现记录</view>
				</view>

			</view>

			<view class="mode">
				<view class="mode-title">
					提现方式
				</view>
				<!-- <view class="mode-item" v-for="(item,index) in payList" :key="index">
					<view class="mode-left">
						<image :src="item.img" mode=""></image>
						<view class="mode-text">
							{{item.text}}
						</view>
					</view>
					<view class="mode-right">
						<u-radio-group v-model="radiovalue" @change="groupChange" iconPlacement="right">
							<u-radio :name="item.text" @change="handleChange(index)" shape="circle" size="24">
							</u-radio>
						</u-radio-group>
					</view>
				</view> -->
				<view class="input-box">
					<view class="title">支付宝姓名：</view>
					<u--input placeholder="请输入支付宝实名姓名" border="surround" v-model="zfbname"></u--input>
				</view>
				<view class="input-box">
					<view class="title">支付宝账号：</view>
					<u--input placeholder="请输入支付宝账号" border="surround" v-model="zfbtel"></u--input>
				</view>
			</view>
			<view class="tisp">注意：提现24小时内到账！</view>
			<view class="btn">
				<u-button shape="circle" size="large" @click="goup"
					color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary" text="立即提现"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				amount: '',
				zfbname: '',
				zfbtel: '',
				payList: [
					// {
					// 	text: '微信',
					// 	img: 'https://m.lqvvvv.com/assets/static/my/vx.png',
					// 	checked: true,
					// },
					{
						text: '支付宝',
						img: 'https://m.lqvvvv.com/assets/static/my/alipay.png',
						checked: false,
					},
					// {
					// 	text: '银行卡',
					// 	img: 'https://m.lqvvvv.com/assets/static/my/bank.png',
					// 	checked: false,
					// },
				],
				radiovalue: '支付宝'
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods: {
			goup() {
				if (this.amount == '') {
					uni.showToast({
						title: '请输入提现金额！',
						icon: 'none'
					})
					return
				}
				if (this.zfbname == '') {
					uni.showToast({
						title: '请输入支付宝实名姓名！',
						icon: 'none'
					})
					return
				}
				if (this.zfbtel == '') {
					uni.showToast({
						title: '请输入支付宝账号！',
						icon: 'none'
					})
					return
				}
				let params = {
					money: this.amount,
					name: this.zfbname,
					account: this.zfbtel
				}
				this.$Request({
					method: 'POST',
					url: '/api/withdraw/submit',
					data: params,
					ismsg: true,
				}).then(res => {
					if (res.code == 1) {
						this.amount = ''
						this.zfbname = ''
						this.zfbtel = ''
						this.getuserinfo()
					} else {

					}
				})
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
					} else {
						this.info = {}
					}
				})
			},
			handleChange(index) {
				this.payList.map(item => {
					item.checked = false
				})
				this.payList[index].checked = true
			},
			groupChange(n) {
				console.log('groupChange', n);
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.recharge-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.tisp {
			margin-top: 20rpx;
			font-size: 26rpx;
			text-align: center;

			color: red;
		}

		.content {
			padding: 30rpx;
			margin-top: 30rpx;

			.recharge {
				background-image: url('https://m.lqvvvv.com/assets/static/my/wallet-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding-bottom: 10rpx;

				.recharge-title {
					padding: 30rpx 30px 20rpx 30rpx;
					border-bottom: 1rpx solid #ffffff;
					font-size: 28rpx;
					font-weight: bold;
					color: #2E314A;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.all {
						color: #5755F2;
						font-size: 24rpx;
						font-weight: normal;
					}
				}

				.amount {
					padding: 20rpx;
					margin: 30rpx;
					background-color: #EDEDF9;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					.amount-text {
						margin-right: 20rpx;
						font-weight: 600;
						font-size: 28rpx;
						color: #2E314A;
					}
				}

				.available {
					color: #2E314A;
					font-size: 22rpx;
					padding: 0 30rpx 20rpx;
				}
			}

			.mode {
				padding: 30rpx 0rpx;
				background-color: #ffffff;
				border-radius: 30rpx;
				margin-top: 50rpx;

				.mode-title {
					color: #000000;
					font-size: 28rpx;
					font-weight: bold;
					padding: 0 30rpx;
				}

				.input-box {
					padding: 0rpx 30rpx;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
				}

				.mode-item {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;
					padding: 0 30rpx;

					.mode-left {
						display: flex;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						.mode-text {
							font-size: 28rpx;
							color: #000000;
							font-weight: bold;
							margin-left: 30rpx;
						}
					}
				}
			}

			.btn {
				padding: 30rpx 60rpx;
				position: fixed;
				bottom: 10%;
				left: 0;
				right: 0;
			}
		}
	}
</style>